<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 添加角色按钮区域 -->
			<el-row>
				<el-col>
					<el-button type="primary" @click="addCateBtn()">添加分类</el-button>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			 <zk-table
			      :data="cateList"
			      :columns="columns"
				  :selection-type="false"
				  :expand-type="false"
				  show-index
				  index-text="序号"
				  border
				  :show-row-hover="true"
				  class="treetable"
			      >
				  <!-- 是否有效列 -->
			     <template slot="isOk" slot-scope="scope">
					 <i class="el-icon-success" 
						 v-if="scope.row.cat_deleted===false" 
						 style="color: lightgreen;">
						 
					 </i>
					  <i class="el-icon-error" v-else  style="color: red;"></i>
				 </template>
				 <!-- 排序列 -->
				 <template slot="order" slot-scope="scope">
					<el-tag v-if="scope.row.cat_level===0" size="mini">一级</el-tag>
					<el-tag type="success" v-else-if="scope.row.cat_level===1" size="mini">二级</el-tag>
					<el-tag type="danger" v-else="scope.row.cat_level===2" size="mini">三级</el-tag>
				 </template>
				 <!-- 操作列 -->
				 <template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row)">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCayeById(scope.row.cat_id)">删除</el-button>
				 </template>
			 </zk-table>
			 <!-- 分页区域 -->
			 <el-pagination
			 	  @size-change="handleSizeChange"
			 	  @current-change="handleCurrentChange"
			 	  :current-page="queryInfo.pagenum"
			 	  :page-sizes="[3, 6, 10,15]"
			 	  :page-size="queryInfo.pagesize"
			 	  layout="total, sizes, prev, pager, next, jumper"
			 	  :total="total">
			 </el-pagination>
		</el-card>
		
		<!-- 添加角色对话框 -->
		<el-dialog
		  title="添加分类"
		  :visible.sync="addcatdialogVisible"
		  width="50%"s
		  @close="addcatDialogClosed"
		 >
		 <!-- 内容主体区域，这里有一个匿名插槽 -->
		  <el-form :model="addcatForm" :rules="addCatFormRules" ref="addCatFormRef" label-width="100px">
			<el-form-item label="分类名称" prop="cat_name">
			  <el-input v-model="addcatForm.cat_name"></el-input>
			</el-form-item>
			<el-form-item label="父级分类">
				  <!-- options用来指定数据源 -->
				  <!-- props用来指定配置对象 -->
				  <!-- v-model必须绑定一个数组(已经选中的id) -->
				<el-cascader v-model="selectedKeys" :options="parentCateList" 
				  :props="cascaderProps"  @change="handleChange" class="el-cascader-panel" clearable
				  ></el-cascader>
			</el-form-item>
		  </el-form>
		  <!-- 底部区域，这里是一个具名插槽 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addcatdialogVisible= false">取 消</el-button>
		    <el-button type="primary" @click="addcate">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 修改角色对话框 -->
		<el-dialog
		  title="修改分类信息"
		  :visible.sync="editCateDialogVisible"
		  width="50%"
		 >
		 <!-- 内容主体区域，这里有一个匿名插槽 -->
		<el-form :model="editCateList" :rules="addCatFormRules" ref="editCateListRef" label-width="100px">
				<el-form-item label="分类名称" prop="cat_name">
				  <el-input v-model="editCateList.cat_name"></el-input>
				</el-form-item>
		</el-form>
		 
		  <!-- 底部区域，这里是一个具名插槽 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editCateDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editCateInfo">修改</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//查询条件
				queryInfo:{
							type:3,
							pagenum:1,
							pagesize:6
						},
				// 查询到的商品分类
				cateList:[],
				// 总数据条数
				total:0,
	             // 为 tree-table指定列定义
				columns: [
						 //第一列数据
						  {
							label: '分类名称',
							prop: 'cat_name',
						  },
						  //第二列数据
						  {
							label:'是否有效',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'isOk',
							width:'75px'
						  },
						  //第三列数据
						  {
							label:'排序',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'order'
						  },
						  //第四列数据
						  {
							label:'操作',
							//表示将当前列定义为模板列
							type:'template',
							//表示当前这一列使用模板名称
							template:'opt'
						  },
						],
				addcatdialogVisible:false,
				addCatFormRules:{
					cat_name:[{ required: true, message: '请输入分类名', trigger: 'blur' }]
				},
				//添加角色按钮的数据存储cat_name
				addcatForm:{
					cat_name:'',
					// 父分类id
					cat_pid:0,
					//等级
					cat_level:0
				},
				//父级分类的列表
				parentCateList:[],
				//指定级联选择器的配置对象
				cascaderProps:{
					expandTrigger: 'hover',
					//获取的数据中的id
					value: 'cat_id',
					//显示在页面上的每一项的内容
					label:'cat_name',
					//下一层级
					children:'children',
					checkStrictly: true
					
				},
				//选中的父级id数组
				selectedKeys:[],
				//编辑分类时保存的数据
				editCateList:{},
				editCateDialogVisible:false
			}
		},
		created(){
			this.getCateList()
		},
		methods:{
			async getCateList(){
				const{data:res}=await this.$http.get('categories',{params:this.queryInfo})
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.cateList=res.data.result
				this.total=res.data.total
			},
			//添加新分类按钮,弹出添加新分类对话框
			async addCateBtn(){
				
			},
			//监听页面改变
			handleSizeChange(pageSize){
				this.queryInfo.pagesize=pageSize
				this.getCateList()
			},
			//监听pagenum的改变
			handleCurrentChange(pagenum){
				this.queryInfo.pagenum=pagenum
				this.getCateList()
			},
			//关闭添加新分类对话框时触发
			addcatDialogClosed(){
				this.$refs.addCatFormRef.resetFields()
				this.selectedKeys=[]
				this.addcatForm.cat_pid=0
				this.addcatForm.cat_level=0
			},
			
			//添加新分类按钮,弹出添加新分类对话框
			async addCateBtn(){
				this.getParentCateList()
				this.addcatdialogVisible=true
			},
			//获取父级分类的数据列表
			async getParentCateList(){
				const{data:res}=await this.$http.get('categories',{
					params:{
						type:2
					}
				})
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.parentCateList=res.data
			},
			//级联选择项发生变化则触发
			handleChange(){
				// console.log(this.selectedKeys)
				//如果selectedKeys数组中的length大于0,证明选中了父级分类
				//反之,则说明没有选中任何父级分类
				if(this.selectedKeys.length>0){
					//取出当前选中的最末尾一级的id,作为当前的值的父级id,为后续发起请求更改数据库参数做铺垫
					this.addcatForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
					//接着为当前的分类等级赋值,同样是为了后续发起请求更改数据库参数做铺垫
					this.addcatForm.cat_level=this.selectedKeys.length
				}else{
					//父级分类的id
					this.addcatForm.cat_pid=0
					this.addcatForm.cat_level=0
				}
			},
			//添加新的分类进数据库
			addcate(){
				//先对表单进行预验证
				this.$refs.addCatFormRef.validate(async valid=>{
					if(!valid)return
					const{data:res}=await this.$http.post('categories',this.addcatForm)
					if(res.meta.status!==201)return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.getCateList()
					this.addcatdialogVisible= false
				})
			},
			//点击编辑按钮
			editCate(cate){
				//打开对话框
				this.editCateDialogVisible= true
				//将本分类得到的数据保存
				this.editCateList=cate
			},
			editCateInfo(){
				//先进行验证
				this.$refs.editCateListRef.validate(async valid=>{
					if(!valid)return 
					//验证通过发起请求
					const{data:res}=await this.$http.put(`categories/${this.editCateList.cat_id}`,{cat_name:this.editCateList.cat_name})
					if(res.meta.status!==200)return this.$message.error(res.meta.msg)
					this.$message.success(res.meta.msg)
					this.getCateList()
					this.editCateDialogVisible= false
				})
			},
			//删除数据
			async removeCayeById(id){
				//弹窗询问是否删除数据
				const confirmResult=await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).catch(err=>err)
				//如果用户确认删除，则返回字符串confirm
				//如果用户确认取消，则返回字符串cancel
				if(confirmResult!=='confirm')return this.$message.info("已经取消了删除")
				const{data:res}=await this.$http.delete('categories/'+id)
				if(res.meta.status!==200)return this.$message.error(res.meta.msg)
				this.$message.success(res.meta.msg)
				this.getCateList()
			}
		},
		
	}
</script>

<style lang="stylus" scoped>
	.treetable{
		margin-top: 15px;
	}
	.el-cascader{
		width: 100%;
	}
	
</style>
